"use client"
import styles from './page.module.scss'
import { Button, Form, Input, message, Upload, Image, Radio, Cascader, Row, Col, Modal } from 'antd';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import adressData from '@/utils/adressData.json'

export default function Home(prpos: any) {
    const { isModalOpen, setIsModalOpen, type } = prpos
    const [userType, setUserType] = useState('短租');
    const router = useRouter()
    const [form] = Form.useForm();
    // 地址选择
    const onChange: any = (value: string) => {
        console.log(value);
    };
    const onCancel = () => {
        setIsModalOpen(false)
    }
    return (
        <Modal title='' open={isModalOpen} footer={null} forceRender onCancel={onCancel}>
            <div className={styles['Modal']}>
                <h2>订单详情</h2>
                <main className={styles['main']}>
                    <div className={styles['line']}></div>
                    <Form
                        name="basic"
                        form={form}
                        className={styles['form']}
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ type: "短租", time: '1天', time2: '1个月' }}
                        onFinish={() => {
                            setIsModalOpen(false)
                            message.success('订单提交成功')
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            className={styles['label']}
                            label="产品名称"
                        >
                            铅酸蓄电池(B001)
                        </Form.Item>
                        {type === '租用' && <Form.Item
                            className={styles['label']}
                            label="租金金额"
                        >
                            800(元/月)
                        </Form.Item>}
                        {type === '租用' && <Form.Item
                            className={styles['label']}
                            label="押金金额"
                        >
                            1000
                        </Form.Item>}
                        {type === '租用' && <Form.Item
                            className={styles['label']}
                            label="逾期费率"
                        >
                            0.05(%/天)
                        </Form.Item>}
                        {type === '租用' && <Form.Item
                            className={styles['label']}
                            name="type"
                            label="租用类型"

                        >
                            <Radio.Group
                                block
                                options={[
                                    { label: '短租', value: '短租' },
                                    { label: '长租', value: '长租' },
                                    { label: '分时租', value: '分时租' },
                                ]}
                                optionType="button"
                                buttonStyle="solid"
                                onChange={(e: any) => setUserType(e.target.value)}
                            />
                        </Form.Item>}
                        {type === '租用' && userType === '短租' && <Row>
                            <Col offset={4} span={24}>
                                <Form.Item
                                    className={styles['label']}
                                    name="time"
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 16 }}
                                >
                                    <Radio.Group
                                        block
                                        options={[
                                            { label: '1天', value: '1天' },
                                            { label: '2天', value: '2天' },
                                            { label: '3天', value: '3天' },
                                        ]}
                                        optionType="button"
                                        buttonStyle="solid"
                                    />
                                </Form.Item>
                            </Col>
                        </Row>}
                        {type === '租用' && userType === '长租' && <Row>
                            <Col offset={4} span={24}>
                                <Form.Item
                                    className={styles['label']}
                                    name="time2"
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 16 }}
                                >
                                    <Radio.Group
                                        block
                                        options={[
                                            { label: '1个月', value: '1个月' },
                                            { label: '2个月', value: '2个月' },
                                            { label: '3个月', value: '3个月' },
                                        ]}
                                        optionType="button"
                                        buttonStyle="solid"
                                    />
                                </Form.Item>
                            </Col>
                        </Row>}
                        <Form.Item
                            className={styles['label']}
                            name="address"
                            label="收货地址"
                            rules={[{ required: true, message: "地址不能为空" }]}
                        >
                            <Cascader options={adressData} onChange={onChange} placeholder='请选择地址' />
                        </Form.Item>
                        <Form.Item
                            className={styles['label']}
                            label="支付方式"
                        >
                            <Image src="/imgs/clients/zfb.jpg" alt="ch" width={80} />&emsp;&emsp;&emsp;
                            <Image src="/imgs/clients/wx.jpg" alt="" width={80} />
                        </Form.Item>
                        <Form.Item
                            className={styles['label']}
                            label="总费用"
                        >
                            <span style={{ fontWeight: 700, fontSize: 24, color: '#ff0000', fontStyle: 'italic', letterSpacing: 5 }}>8000</span>元
                        </Form.Item>

                        <Form.Item label={null}>
                            <Button className={styles['btn']} type="primary" htmlType="submit" block >
                                {type === '租用' ? '立即租用' : '直接购买'}
                            </Button>
                        </Form.Item>
                    </Form>
                </main>
            </div>
        </Modal>
    );
}
